<template>
  <el-dialog :class="'el-dialog-theme3'" v-model="show" title="查看点位信息" width="1400">
    <p class="pinformation">点位信息</p>
    <el-form ref="formRef" :model="form" label-width="80">
      <el-row>
        <el-col :span="4">
          <el-form-item label="检测类型：" prop="jclbId">
            {{ form.jclbName || "/" }}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="点位属性：" prop="property">
            {{ form.propertyId || "/" }}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="点位名称：" prop="pointName">
            {{ form.pointName || "/" }}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="周期类型：" prop="cycleType" label-width="100">
            {{ form.cycleTypeName || "/" }}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="周期次数：" prop="cycleCount" label-width="100">
            {{ form.cycleCount || "/" }}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="采样方式：">
            {{ form.sampleTypeName || "/" }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="排序号：" prop="orderId">
            {{ form.orderId || "/" }}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="采样天数：" prop="sampleDay">
            {{ form.sampleDay || "/" }}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="每天频次：" prop="sampleCount">
            {{ form.sampleCount || "/" }}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="东经（度）：" prop="jd" label-width="100">
            {{ form.jd || "/" }}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="北纬（度）：" prop="wd" label-width="100">
            {{ form.wd || "/" }}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="点位编号：" prop="pointCode">
            {{ form.pointCode || "/" }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
      <el-tab-pane label="不分包检测项目" name="first">
        <el-row>
          <el-col :span="6">
            <p class="pinformation" style="margin-top: 9px">
              共{{ taskJcxmTotal }}条数据
            </p>
          </el-col>
          <el-col :span="18">
            <el-row justify="end">
              <el-input placeholder="请输入检测项目、方法编号、方法名称" clearable v-model="queryTaskJcxmForm.remark" prefix-icon="Search"
                style="width: 350px" @input="handleQuery" />
            </el-row>
          </el-col>
        </el-row>
        <el-table style="margin-top: 10px;" :data="taskJcxmList" v-loading="taskJcxmLoading" height="36vh" border>
          <el-table-column label="序号" align="center" width="55">
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="检测类别" align="center" prop="jclbName" width="120" />
          <el-table-column label="检测项目" align="center" prop="jcxmName" width="120" show-overflow-tooltip>
            <template #default="scope">
              <span v-html="transformation(scope.row.jcxmName)"></span>
            </template>
          </el-table-column>
          <el-table-column label="方法编号" align="center" prop="methodCode" width="140" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="方法名称" align="center" prop="methodName" show-overflow-tooltip />
          <el-table-column label="检测项目组别" align="center" width="140" prop="groupName" />
          <el-table-column label="是否求和" align="center" width="90">
            <template #default="scope">
              <span v-if="scope.row.isSum == 0">否</span>
              <span v-if="scope.row.isSum == 1">是</span>
            </template>
          </el-table-column>
          <el-table-column label="采样天数" align="center" width="120" prop="sampleDay">
          </el-table-column>
          <el-table-column label="每天频次" align="center" width="120" prop="sampleCount">
          </el-table-column>
          <el-table-column label="评价标准" align="center" prop="pjName" show-overflow-tooltip />
          <el-table-column label="上限" align="center" prop="maxValue" />
          <el-table-column label="下限" align="center" prop="minValue" />
          <el-table-column label="指定方法" align="center" width="90">
            <template #default="scope">
              <span v-if="scope.row.isMethod == 0">否</span>
              <span v-if="scope.row.isMethod == 1">是</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-if="taskJcxmTotal" :total="taskJcxmTotal" v-model:page="queryTaskJcxmForm.pageNum"
          v-model:limit="queryTaskJcxmForm.pageSize" @pagination="getTakJcxmList"
          style="margin-top: 10px !important; margin-right: 5vw" />
      </el-tab-pane>
      <el-tab-pane label="分包检测项目" name="second">
        <el-row>
          <el-col :span="6">
            <p class="pinformation" style="margin-top: 9px">
              共{{ taskJcxmTotal }}条数据
            </p>
          </el-col>
          <el-col :span="18">
            <el-row justify="end">
              <el-input placeholder="请输入检测项目、方法编号、方法名称" clearable v-model="queryTaskJcxmForm.remark" prefix-icon="Search"
                style="width: 350px" @input="handleQuery" />
            </el-row>
          </el-col>
        </el-row>
        <el-table style="margin-top: 10px;" :data="taskJcxmList" height="36vh" border>
          <el-table-column label="序号" align="center" width="55">
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="检测类别" align="center" prop="jclbName" width="120" />
          <el-table-column label="检测项目" align="center" prop="jcxmName" width="120" show-overflow-tooltip>
            <template #default="scope">
              <span v-html="transformation(scope.row.jcxmName)"></span>
            </template>
          </el-table-column>
          <el-table-column label="方法编号" align="center" prop="methodCode" width="140" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="方法名称" align="center" prop="methodName" width="400" show-overflow-tooltip />
          <el-table-column label="检测项目组别" align="center" width="140" prop="groupName" show-overflow-tooltip />
          <el-table-column label="是否采样" align="center" width="90">
            <template #default="scope">
              <span v-if="scope.row.isPackage == 1">是</span>
              <span v-if="scope.row.isPackage == 2">否</span>
            </template>
          </el-table-column>
          <el-table-column label="分包公司" align="center" width="140" prop="packageName" show-overflow-tooltip />
          <el-table-column label="是否求和" align="center" width="90">
            <template #default="scope">
              <span v-if="scope.row.isSum == 0">否</span>
              <span v-if="scope.row.isSum == 1">是</span>
            </template>
          </el-table-column>
          <el-table-column label="采样天数" align="center" width="120" prop="sampleDay" />
          <el-table-column label="每天频次" align="center" width="120" prop="sampleCount" />
          <el-table-column label="分包公司" align="center" prop="packageName" width="250" />
          <el-table-column label="是否采样" align="center" width="90">
            <template #default="scope">
              <span v-if="scope.row.isCollect == 0">否</span>
              <span v-if="scope.row.isCollect == 1">是</span>
            </template>
          </el-table-column>
          <el-table-column label="评价标准" align="center" prop="pjName" width="160" show-overflow-tooltip />
          <el-table-column label="上限" align="center" prop="maxValue" />
          <el-table-column label="下限" align="center" prop="minValue" />
          <el-table-column label="指定方法" align="center" width="90">
            <template #default="scope">
              <span v-if="scope.row.isMethod == 0">否</span>
              <span v-if="scope.row.isMethod == 1">是</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show = false" type="danger">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { getPoint, listTaskJcxm } from "@/api/contract/taskPoint";
import { nextTick } from "vue";
const { proxy } = getCurrentInstance();
const show = ref(false);
const form = ref({});
const queryTaskJcxmForm = ref({ pageNum: 1, pageSize: 10, });
const activeName = ref("first");
const taskJcxmTotal = ref(0)
const taskJcxmLoading = ref(false)
const taskJcxmList = ref([])

const props = defineProps({
  pointId: {
    type: String,
  },
});

function showDialog() {
  show.value = true;
  nextTick(() => {
    getPoint(props.pointId).then((res) => {
      form.value = res.data;
    });
    queryTaskJcxmForm.value.pointId = props.pointId
    getTakJcxmList()
  });
}

function getTakJcxmList() {
  taskJcxmLoading.value = true
  queryTaskJcxmForm.value.isPackage = (activeName.value == "first" ? 0 : 3)
  taskJcxmList.value = [];
  taskJcxmTotal.value = 0;
  listTaskJcxm(queryTaskJcxmForm.value).then((res) => {
    taskJcxmList.value = res.rows;
    taskJcxmTotal.value = res.total;
    taskJcxmLoading.value = false
  });
}

function handleQuery() {
  queryTaskJcxmForm.value.pageNum = 1;
  getTakJcxmList();
}

function tabChange(name) {
  handleQuery()
}

function transformation(row) {
  if (row) {
    return proxy.getSupAndSub(row);
  }
}

defineExpose({
  showDialog,
});
</script>
